/*=========================================================
VARIABLES GLOBALES
=========================================================*/

:root{

    --azul-oscuro:#07152b;
    --azul-principal:#2563eb;
    --azul-claro:#3b82f6;

    --blanco:#ffffff;

    --gris-fondo:#f5f7fb;
    --gris-texto:#64748b;
    --negro:#111827;

    --sombra:
    0 20px 50px rgba(0,0,0,.08);

    --transicion:
    all .35s ease;

}


/*=========================================================
RESET
=========================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    font-family:'Poppins',sans-serif;

    background:
    var(--blanco);

    color:
    var(--negro);

    overflow-x:hidden;

}


img{

    max-width:100%;
    display:block;

}


a{

    text-decoration:none;

    color:inherit;

}


ul{

    list-style:none;

}


/*=========================================================
CONTENEDOR GENERAL
=========================================================*/

.contenedor{

    width:min(1200px,90%);

    margin:auto;

}


/*=========================================================
BOTONES GENERALES
=========================================================*/


.btn-principal,
.btn-secundario,
.btn-header,
.btn-aliado{


    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 32px;

    border-radius:50px;

    font-size:.95rem;

    font-weight:600;

    transition:var(--transicion);

    cursor:pointer;


}



/* BOTÓN PRINCIPAL */

.btn-principal{


    background:
    var(--azul-principal);

    color:
    var(--blanco);

    box-shadow:
    0 15px 30px rgba(37,99,235,.25);


}



.btn-principal:hover{


    transform:translateY(-4px);

    background:
    var(--azul-claro);


}



/* BOTÓN SECUNDARIO */

.btn-secundario{


    border:

    1px solid rgba(255,255,255,.35);

    color:
    var(--blanco);

    background:
    rgba(255,255,255,.08);

    backdrop-filter:
    blur(10px);


}


.btn-secundario:hover{


    background:
    var(--blanco);

    color:
    var(--azul-oscuro);

    transform:
    translateY(-4px);


}



/*=========================================================
TITULOS DE SECCIÓN
=========================================================*/


.titulo-seccion{


    max-width:750px;

    margin:0 auto 70px;

    text-align:center;


}


.titulo-seccion span{


    display:inline-block;

    margin-bottom:15px;

    color:
    var(--azul-principal);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:2px;


}


.titulo-seccion h2{


    font-size:
    clamp(2rem,4vw,3rem);

    line-height:1.2;

    font-weight:700;


}



.titulo-seccion h2 strong{


    color:
    var(--azul-principal);


}



.titulo-seccion p{


    margin-top:20px;

    color:
    var(--gris-texto);

    line-height:1.8;

    font-size:1.05rem;


}


/*=========================================================
ANIMACIONES
=========================================================*/


@keyframes aparecer{

    from{

        opacity:0;

        transform:
        translateY(30px);

    }


    to{

        opacity:1;

        transform:
        translateY(0);

    }

}
/*=========================================================
HEADER
=========================================================*/


.header{

    position:relative;

    width:100%;

    background:
    var(--azul-oscuro);

    z-index:1000;

}



.navbar{


    width:min(1200px,90%);

    height:90px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;


}



/*=========================================================
LOGO
=========================================================*/


.logo{


    display:flex;

    align-items:center;

}



.logo img{


    width:150px;

    height:auto;

    transition:
    var(--transicion);


}


.logo:hover img{


    transform:
    scale(1.05);


}



/*=========================================================
MENU
=========================================================*/


.menu{


    display:flex;

    align-items:center;

    gap:35px;


}



.menu li{


    position:relative;


}



.menu a{


    color:
    rgba(255,255,255,.85);

    font-size:.95rem;

    font-weight:500;

    transition:
    var(--transicion);


}



.menu a:hover,
.menu a.activo{


    color:
    var(--blanco);


}



/* línea inferior activa */

.menu a::after{


    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:
    var(--azul-principal);

    transition:
    var(--transicion);


}



.menu a:hover::after,
.menu a.activo::after{


    width:100%;


}



/*=========================================================
BOTÓN HEADER
=========================================================*/


.btn-header{


    background:
    var(--azul-principal);


    color:
    var(--blanco);


    padding:

    12px 25px;


    font-size:.9rem;


    box-shadow:

    0 10px 25px rgba(37,99,235,.35);


}



.btn-header:hover{


    transform:
    translateY(-3px);


    background:
    var(--azul-claro);


}



/*=========================================================
EFECTO AL HACER SCROLL
=========================================================*/


.header.scrolled{


    position:fixed;

    top:0;

    left:0;

    background:
    rgba(7,21,43,.95);

    backdrop-filter:
    blur(15px);


}



/*=========================================================
RESPONSIVE HEADER TABLET
=========================================================*/


@media(max-width:1000px){


    .menu{


        gap:20px;


    }


    .menu a{


        font-size:.85rem;


    }


    .logo img{


        width:130px;


    }


}



/*=========================================================
RESPONSIVE HEADER MÓVIL
=========================================================*/


@media(max-width:768px){


    .navbar{


        height:auto;

        padding:
        20px 0;

        flex-direction:
        column;

        gap:25px;


    }


    .menu{


        flex-wrap:wrap;

        justify-content:center;

        gap:18px;


    }


    .btn-header{


        display:none;


    }


}
/*=========================================================
HERO
=========================================================*/


.hero{

    min-height:calc(100vh - 90px);

    background:

    linear-gradient(
        135deg,
        #07152b 0%,
        #0b1f3f 50%,
        #102b55 100%
    );

    color:
    var(--blanco);

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

}



/* brillo decorativo */

.hero::before{


    content:"";

    position:absolute;

    width:600px;

    height:600px;

    background:
    rgba(37,99,235,.18);

    filter:
    blur(120px);

    border-radius:50%;

    right:-150px;

    top:-100px;


}



.hero-contenedor{


    display:grid;

    grid-template-columns:

    1fr 1fr;

    gap:50px;

    align-items:center;


}



/*=========================================================
INFORMACIÓN HERO
=========================================================*/


.hero-info{


    animation:
    aparecer .8s ease;


}



.hero-etiqueta{


    display:inline-block;

    padding:
    8px 18px;

    border-radius:50px;

    background:
    rgba(255,255,255,.08);

    border:
    1px solid rgba(255,255,255,.15);

    color:
    #93c5fd;

    font-size:.8rem;

    letter-spacing:2px;

    font-weight:600;

    margin-bottom:25px;


}



.hero-info h1{


    font-size:

    clamp(2.5rem,5vw,4.3rem);

    line-height:1.1;

    font-weight:800;

    margin-bottom:25px;


}



.hero-info h1 span{


    color:

    var(--azul-claro);


}



.hero-info p{


    color:

    rgba(255,255,255,.75);

    line-height:1.8;

    max-width:600px;

    margin-bottom:35px;

    font-size:1.05rem;


}



.hero-info strong{


    color:
    var(--blanco);


}



/* botones */


.hero-botones{


    display:flex;

    gap:18px;

    flex-wrap:wrap;


}



/*=========================================================
ECOSISTEMA VISUAL
=========================================================*/


.hero-ecosistema{


    display:flex;

    justify-content:center;

    align-items:center;


}



.ecosistema-wrapper{


    width:500px;

    height:500px;

    position:relative;


}



/*=========================================================
LINEAS SVG
=========================================================*/


.ecosistema-lineas{


    position:absolute;

    inset:0;

    width:100%;

    height:100%;


}



.ecosistema-lineas line{


    stroke:

    rgba(255,255,255,.25);

    stroke-width:3;


}



/*=========================================================
CENTRO
=========================================================*/


.centro{


    position:absolute;

    top:50%;

    left:50%;

    transform:

    translate(-50%,-50%);


    width:190px;

    height:190px;


    background:

    rgba(255,255,255,.12);


    border:

    1px solid rgba(255,255,255,.25);


    backdrop-filter:

    blur(15px);


    border-radius:50%;


    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;


    text-align:center;


    box-shadow:

    0 20px 50px rgba(0,0,0,.3);


}



.centro img{


    width:65px;

    margin-bottom:8px;


}



.centro h3{


    font-size:1.1rem;


}



.centro p{


    font-size:.7rem;

    color:

    rgba(255,255,255,.7);


}



/*=========================================================
NODOS
=========================================================*/


.nodo{


    position:absolute;

    width:150px;

    height:150px;


    border-radius:50%;


    background:

    rgba(255,255,255,.08);


    border:

    1px solid rgba(255,255,255,.18);


    backdrop-filter:

    blur(12px);


    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;


    text-align:center;


    transition:

    var(--transicion);


}



.nodo:hover{


    transform:

    scale(1.08);


    background:

    rgba(37,99,235,.35);


}



.nodo i{


    font-size:2rem;

    color:

    #93c5fd;

    margin-bottom:12px;


}



.nodo h4{


    font-size:.9rem;

    line-height:1.3;


}



/* posiciones */


.nodo-1{


    top:20px;

    left:50px;


}


.nodo-2{


    top:20px;

    right:50px;


}



.nodo-3{


    bottom:20px;

    left:50px;


}



.nodo-4{


    bottom:20px;

    right:50px;


}


/*=========================================================
RESPONSIVE HERO
=========================================================*/


@media(max-width:1000px){


    .hero-contenedor{


        grid-template-columns:1fr;

        text-align:center;


    }


    .hero-info p{


        margin-left:auto;

        margin-right:auto;


    }


    .hero-botones{


        justify-content:center;


    }


}



@media(max-width:600px){


    .ecosistema-wrapper{


        width:330px;

        height:330px;


    }


    .centro{


        width:120px;

        height:120px;


    }


    .centro img{


        width:40px;


    }


    .nodo{


        width:95px;

        height:95px;


    }


    .nodo i{


        font-size:1.2rem;


    }


    .nodo h4{


        font-size:.65rem;


    }


}/*=========================================================
SECCIÓN ECOSISTEMA
=========================================================*/


.ecosistema{


    padding:120px 0;

    background:
    var(--blanco);


}



/*=========================================================
GRID PRINCIPAL
=========================================================*/


.ecosistema-grid{


    display:grid;

    grid-template-columns:

    .9fr 1.1fr;

    gap:70px;

    align-items:center;


}



/*=========================================================
TEXTO
=========================================================*/


.ecosistema-texto{


    color:

    var(--gris-texto);


}



.ecosistema-texto p{


    font-size:1.05rem;

    line-height:1.9;

    margin-bottom:25px;


}



.ecosistema-texto strong{


    color:

    var(--azul-oscuro);


}



/*=========================================================
TARJETAS PILARES
=========================================================*/


.ecosistema-datos{


    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:25px;


}



.dato-card{


    background:

    var(--blanco);


    padding:35px 25px;


    border-radius:25px;


    box-shadow:

    var(--sombra);


    border:

    1px solid rgba(0,0,0,.05);


    transition:

    var(--transicion);


}



.dato-card:hover{


    transform:

    translateY(-10px);


    box-shadow:

    0 25px 60px rgba(0,0,0,.12);


}



.dato-card i{


    width:65px;

    height:65px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:20px;


    background:

    rgba(37,99,235,.1);


    color:

    var(--azul-principal);


    font-size:1.8rem;


    margin-bottom:25px;


}



.dato-card h3{


    font-size:1.15rem;

    margin-bottom:15px;


}



.dato-card p{


    color:

    var(--gris-texto);


    font-size:.9rem;

    line-height:1.7;


}



/*=========================================================
RESPONSIVE ECOSISTEMA
=========================================================*/


@media(max-width:1100px){


    .ecosistema-grid{


        grid-template-columns:1fr;

        gap:50px;


    }


    .ecosistema-datos{


        grid-template-columns:repeat(3,1fr);


    }


}



@media(max-width:800px){


    .ecosistema{


        padding:80px 0;


    }



    .ecosistema-datos{


        grid-template-columns:1fr;


    }



}/*=========================================================
POR QUÉ ELEGIRNOS
=========================================================*/


.porque-elegirnos{


    padding:120px 0;

    background:

    var(--gris-fondo);


}



/*=========================================================
GRID VENTAJAS
=========================================================*/


.ventajas-grid{


    display:grid;

    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}



/*=========================================================
CARD VENTAJA
=========================================================*/


.ventaja-card{


    background:

    var(--blanco);


    padding:40px 30px;


    border-radius:28px;


    box-shadow:

    0 15px 40px rgba(0,0,0,.06);


    border:

    1px solid rgba(0,0,0,.04);


    transition:

    var(--transicion);


    position:relative;

    overflow:hidden;


}



.ventaja-card::before{


    content:"";


    position:absolute;


    width:120px;

    height:120px;


    background:

    rgba(37,99,235,.08);


    border-radius:50%;


    top:-50px;

    right:-50px;


}



/* hover */


.ventaja-card:hover{


    transform:

    translateY(-12px);


    box-shadow:

    0 25px 60px rgba(0,0,0,.12);


}



/*=========================================================
ICONO
=========================================================*/


.ventaja-icono{


    width:75px;

    height:75px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:22px;


    background:

    linear-gradient(

    135deg,

    rgba(37,99,235,.15),

    rgba(59,130,246,.05)

    );


    margin-bottom:25px;


}



.ventaja-icono i{


    font-size:2rem;


    color:

    var(--azul-principal);


}



.ventaja-card h3{


    font-size:1.25rem;


    margin-bottom:15px;


    color:

    var(--azul-oscuro);


}



.ventaja-card p{


    color:

    var(--gris-texto);


    line-height:1.8;


    font-size:.95rem;


}



/*=========================================================
RESPONSIVE
=========================================================*/


@media(max-width:1000px){


    .ventajas-grid{


        grid-template-columns:

        repeat(2,1fr);


    }


}



@media(max-width:650px){


    .porque-elegirnos{


        padding:80px 0;


    }



    .ventajas-grid{


        grid-template-columns:

        1fr;


    }



}/*=========================================================
MISIÓN Y VISIÓN
=========================================================*/


.mision-vision{


    padding:120px 0;

    background:

    var(--blanco);


}



/*=========================================================
GRID
=========================================================*/


.mision-grid{


    display:grid;

    grid-template-columns:

    repeat(2,1fr);


    gap:40px;


}



/*=========================================================
CARDS GENERALES
=========================================================*/


.mision-card,
.vision-card{


    padding:50px 45px;


    border-radius:35px;


    background:

    var(--gris-fondo);


    border:

    1px solid rgba(0,0,0,.05);


    position:relative;


    overflow:hidden;


    transition:

    var(--transicion);


}



/* decoración */


.mision-card::before,
.vision-card::before{


    content:"";


    position:absolute;


    width:250px;

    height:250px;


    border-radius:50%;


    background:

    rgba(37,99,235,.08);


    right:-100px;

    top:-100px;


}



.mision-card:hover,
.vision-card:hover{


    transform:

    translateY(-10px);


    box-shadow:

    var(--sombra);


}



/*=========================================================
ICONOS
=========================================================*/


.mision-icono,
.vision-icono{


    width:80px;

    height:80px;


    border-radius:25px;


    display:flex;

    align-items:center;

    justify-content:center;


    background:

    var(--azul-principal);


    color:

    var(--blanco);


    margin-bottom:30px;


}



.mision-icono i,
.vision-icono i{


    font-size:2.2rem;


}



/*=========================================================
TÍTULOS
=========================================================*/


.mision-card h3,
.vision-card h3{


    font-size:1.8rem;


    margin-bottom:25px;


    color:

    var(--azul-oscuro);


}



/*=========================================================
TEXTOS
=========================================================*/


.mision-card p,
.vision-card p{


    color:

    var(--gris-texto);


    line-height:

    1.9;


    margin-bottom:20px;


    font-size:.98rem;


}



.mision-card strong,
.vision-card strong{


    color:

    var(--azul-oscuro);


}



/*=========================================================
RESPONSIVE
=========================================================*/


@media(max-width:900px){


    .mision-grid{


        grid-template-columns:

        1fr;


    }


}



@media(max-width:600px){


    .mision-vision{


        padding:80px 0;


    }



    .mision-card,
    .vision-card{


        padding:

        35px 25px;


    }



    .mision-card h3,
    .vision-card h3{


        font-size:1.5rem;


    }


}/*=========================================================
VALORES
=========================================================*/


.valores{


    padding:120px 0;


    background:

    var(--gris-fondo);


}



/*=========================================================
GRID VALORES
=========================================================*/


.valores-grid{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}



/*=========================================================
CARD VALOR
=========================================================*/


.valor-card{


    background:

    var(--blanco);


    padding:40px 30px;


    border-radius:30px;


    text-align:center;


    box-shadow:

    0 15px 35px rgba(0,0,0,.06);


    border:

    1px solid rgba(0,0,0,.04);


    transition:

    var(--transicion);


}



.valor-card:hover{


    transform:

    translateY(-12px);


    box-shadow:

    0 25px 60px rgba(0,0,0,.12);


}



/*=========================================================
ICONOS
=========================================================*/


.valor-card i{


    width:80px;


    height:80px;


    display:flex;


    align-items:center;


    justify-content:center;


    margin:

    0 auto 25px;


    border-radius:50%;


    background:


    rgba(37,99,235,.1);


    color:

    var(--azul-principal);


    font-size:2rem;


    transition:

    var(--transicion);


}



.valor-card:hover i{


    background:

    var(--azul-principal);


    color:

    var(--blanco);


    transform:

    rotateY(180deg);


}



/*=========================================================
TEXTOS
=========================================================*/


.valor-card h3{


    font-size:1.3rem;


    margin-bottom:15px;


    color:

    var(--azul-oscuro);


}



.valor-card p{


    color:

    var(--gris-texto);


    line-height:

    1.8;


    font-size:.95rem;


}



/*=========================================================
RESPONSIVE
=========================================================*/


@media(max-width:1000px){


    .valores-grid{


        grid-template-columns:

        repeat(2,1fr);


    }


}



@media(max-width:650px){


    .valores{


        padding:80px 0;


    }



    .valores-grid{


        grid-template-columns:

        1fr;


    }



}/*=========================================================
REDES SOCIALES
=========================================================*/


.redes-sociales{


    padding:120px 0;


    background:

    var(--blanco);


}



/*=========================================================
GRID REDES
=========================================================*/


.redes-grid{


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:25px;


    margin-bottom:80px;


}



/*=========================================================
CARD RED SOCIAL
=========================================================*/


.red-social{


    padding:35px 25px;


    border-radius:30px;


    background:

    var(--gris-fondo);


    text-align:center;


    transition:

    var(--transicion);


    border:

    1px solid rgba(0,0,0,.05);


}



.red-social:hover{


    transform:

    translateY(-10px);


    box-shadow:

    var(--sombra);


}



/*=========================================================
ICONOS REDES
=========================================================*/


.red-social i{


    width:75px;


    height:75px;


    display:flex;


    align-items:center;


    justify-content:center;


    margin:

    0 auto 20px;


    border-radius:50%;


    background:

    var(--azul-principal);


    color:

    var(--blanco);


    font-size:2rem;


}



/*=========================================================
TEXTOS
=========================================================*/


.red-social h3{


    font-size:1.25rem;


    margin-bottom:12px;


    color:

    var(--azul-oscuro);


}



.red-social p{


    color:

    var(--gris-texto);


    line-height:1.7;


    font-size:.9rem;


}



/*=========================================================
COLORES INDIVIDUALES
=========================================================*/


.facebook i{


    background:

    #1877f2;


}



.instagram i{


    background:

    #e1306c;


}



.linkedin i{


    background:

    #0a66c2;


}



.whatsapp i{


    background:

    #25d366;


}



/*=========================================================
CAJA ALIADO
=========================================================*/


.aliado-box{


    padding:

    60px 50px;


    border-radius:

    40px;


    text-align:center;


    background:


    linear-gradient(

    135deg,

    var(--azul-oscuro),

    #102b55

    );


    color:

    var(--blanco);


    position:relative;


    overflow:hidden;


}



/* efecto luz */


.aliado-box::before{


    content:"";


    position:absolute;


    width:350px;


    height:350px;


    border-radius:50%;


    background:

    rgba(37,99,235,.35);


    filter:

    blur(80px);


    top:-150px;


    right:-100px;


}



.aliado-box h2{


    position:relative;


    font-size:

    clamp(1.8rem,3vw,2.5rem);


    margin-bottom:20px;


}



.aliado-box p{


    position:relative;


    max-width:800px;


    margin:

    0 auto 35px;


    line-height:1.8;


    color:

    rgba(255,255,255,.75);


}



/* BOTÓN */


.btn-aliado{


    position:relative;


    background:

    var(--blanco);


    color:

    var(--azul-oscuro);


}



.btn-aliado:hover{


    transform:

    translateY(-5px);


    background:

    #dbeafe;


}



/*=========================================================
RESPONSIVE
=========================================================*/


@media(max-width:1000px){


    .redes-grid{


        grid-template-columns:

        repeat(2,1fr);


    }


}



@media(max-width:650px){


    .redes-sociales{


        padding:80px 0;


    }



    .redes-grid{


        grid-template-columns:

        1fr;


    }



    .aliado-box{


        padding:

        40px 25px;


    }


}/*=========================================================
CTA FINAL
=========================================================*/


.cta-final{


    padding:120px 0;


    background:

    var(--gris-fondo);


}



/*=========================================================
CONTENIDO CTA
=========================================================*/


.cta-final .contenedor{


    display:grid;


    grid-template-columns:

    1.2fr .8fr;


    gap:60px;


    align-items:center;


}



.cta-contenido span{


    display:inline-block;


    color:

    var(--azul-principal);


    font-size:.85rem;


    letter-spacing:2px;


    font-weight:700;


    margin-bottom:20px;


}



.cta-contenido h2{


    font-size:

    clamp(2rem,4vw,3.2rem);


    line-height:1.2;


    color:

    var(--azul-oscuro);


    margin-bottom:25px;


}



.cta-contenido p{


    color:

    var(--gris-texto);


    line-height:1.9;


    margin-bottom:35px;


    font-size:1.05rem;


}



/*=========================================================
BOTONES CTA
=========================================================*/


.cta-botones{


    display:flex;


    gap:20px;


    flex-wrap:wrap;


}



/* adaptar botón secundario */


.cta-botones .btn-secundario{


    background:

    var(--azul-oscuro);


    color:

    var(--blanco);


    border:none;


}



.cta-botones .btn-secundario:hover{


    background:

    var(--azul-principal);


}



/*=========================================================
ESTADÍSTICAS
=========================================================*/


.cta-estadisticas{


    display:flex;


    flex-direction:column;


    gap:25px;


}



.estadistica{


    background:

    var(--blanco);


    padding:

    35px;


    border-radius:30px;


    text-align:center;


    box-shadow:

    var(--sombra);


    border:

    1px solid rgba(0,0,0,.05);


    transition:

    var(--transicion);


}



.estadistica:hover{


    transform:

    translateX(-10px);


}



.estadistica h3{


    font-size:

    3rem;


    color:

    var(--azul-principal);


    line-height:1;


    margin-bottom:15px;


}



.estadistica p{


    color:

    var(--gris-texto);


    font-size:.95rem;


}



/*=========================================================
RESPONSIVE CTA
=========================================================*/


@media(max-width:900px){


    .cta-final .contenedor{


        grid-template-columns:

        1fr;


        text-align:center;


    }



    .cta-botones{


        justify-content:center;


    }



    .cta-estadisticas{


        margin-top:30px;


    }


}



@media(max-width:600px){


    .cta-final{


        padding:80px 0;


    }



    .estadistica h3{


        font-size:2.5rem;


    }


}/*=========================================================
FOOTER
=========================================================*/


.footer{


    padding:80px 0 30px;


    background:

    var(--azul-oscuro);


    color:

    var(--blanco);


}



/*=========================================================
GRID FOOTER
=========================================================*/


.footer-grid{


    display:grid;


    grid-template-columns:

    1.4fr 1fr 1fr .8fr;


    gap:40px;


    padding-bottom:50px;


}



/*=========================================================
LOGO FOOTER
=========================================================*/


.footer-logo{


    width:170px;


    margin-bottom:25px;


}



.footer-col p{


    color:

    rgba(255,255,255,.65);


    line-height:1.8;


    font-size:.9rem;


}



/*=========================================================
TÍTULOS FOOTER
=========================================================*/


.footer-col h3{


    font-size:1.2rem;


    margin-bottom:25px;


}



.footer-col ul{


    display:flex;


    flex-direction:column;


    gap:14px;


}



.footer-col ul li a{


    color:

    rgba(255,255,255,.7);


    transition:

    var(--transicion);


}



.footer-col ul li a:hover{


    color:

    var(--blanco);


    padding-left:5px;


}



/*=========================================================
DATOS CONTACTO
=========================================================*/


.footer-col p i{


    width:25px;


    color:

    #93c5fd;


}



/*=========================================================
REDES FOOTER
=========================================================*/


.footer-redes{


    display:flex;


    gap:12px;


}



.footer-redes a{


    width:45px;


    height:45px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:

    rgba(255,255,255,.1);


    transition:

    var(--transicion);


}



.footer-redes a:hover{


    background:

    var(--azul-principal);


    transform:

    translateY(-5px);


}



/*=========================================================
COPYRIGHT
=========================================================*/


.footer-copy{


    padding-top:30px;


    border-top:

    1px solid rgba(255,255,255,.12);


    text-align:center;


    color:

    rgba(255,255,255,.5);


    font-size:.85rem;


}



/*=========================================================
RESPONSIVE FOOTER
=========================================================*/


@media(max-width:1000px){


    .footer-grid{


        grid-template-columns:

        repeat(2,1fr);


    }


}



@media(max-width:600px){


    .footer{


        padding-top:60px;


    }



    .footer-grid{


        grid-template-columns:

        1fr;


        text-align:center;


    }



    .footer-logo{


        margin:

        0 auto 25px;


    }



    .footer-redes{


        justify-content:center;


    }


}



/*=========================================================
AJUSTES GENERALES MÓVIL
=========================================================*/


@media(max-width:500px){


    .titulo-seccion{


        margin-bottom:45px;


    }



    .titulo-seccion h2{


        font-size:1.9rem;


    }



    .hero-info h1{


        font-size:2.3rem;


    }



    .btn-principal,
    .btn-secundario,
    .btn-header,
    .btn-aliado{


        width:100%;


    }



    .hero-botones,
    .cta-botones{


        width:100%;


    }


}